﻿<div class="WAll PB">

	<div class="BlockLabel PL PR">
		<p>在列表中的元素进行滑动动作是最真棒KUI功能之一。它允许你调用每个列表元素隐藏菜单，你可以把默认的删除按钮或其他任何按钮以滑动动作来显示。</p>
	</div>
	<div class="ContentBlockTitle">滑动删除与确认模式</div>
	<div class="ListBlock">
		<ul>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">请向左滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span data-confirm="你确定要删除吗?" data-confirmtitle="你确定要删除吗?" class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">向左滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span data-confirm="你确定要删除吗?" class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem">
				<div class="ItemCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">不可滑动</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="ContentBlockTitle">滑动删除不确认</div>
	<div class="ListBlock">
		<ul>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">请向左滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">向左滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem">
				<div class="ItemCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">不可滑动</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="ContentBlockTitle">滑动操作表单</div>
	<div class="ListBlock">
		<ul>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">请向左滑动(自动关闭)</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span class="SwipeoutItem DemoActions SwipeoutClose">更多</span><span class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">向左滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span class="SwipeoutItem DemoActions">更多</span><span class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem">
				<div class="ItemCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">不可滑动</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="ContentBlockTitle">删除回调</div>
	<div class="ListBlock">
		<ul>
			<li class="ListItem Swipeout DemoRemoveCallback">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">请向左滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem Swipeout DemoRemoveCallback">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">向左滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsRight"><span class="SwipeoutItem SwipeoutDelete">删除</span></div>
			</li>
			<li class="ListItem">
				<div class="ItemCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">不可滑动</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="ContentBlockTitle">滑动左侧操作(向右滑动)</div>
	<div class="ListBlock">
		<ul>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">请向右滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsLeft">
					<span class="SwipeoutItem BGreen DemoReply">回复</span>
					<span class="SwipeoutItem BBlue DemoForwarding">转发</span>
				</div>
			</li>
			<li class="ListItem Swipeout">
				<div class="ItemCon SwipeoutCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">向右滑动</div>
					</div>
				</div>
				<div class="SwipeoutActionsLeft">
					<span class="SwipeoutItem BGreen DemoReply">回复</span>
					<span class="SwipeoutItem BBlue DemoForwarding">转发</span>
				</div>
			</li>
			<li class="ListItem">
				<div class="ItemCon">
					<div class="ItemMedia"><img class="Icon" src="images/svg/iconfont-shoucangxuanzhong.svg" alt="收藏(填充)"></div>
					<div class="ItemInner"> 
						<div class="ItemTitle">不可滑动</div>
					</div>
				</div>
			</li>
		</ul>
	</div>

	<div class="ContentBlockTitle">两侧滑动操作</div>
	<div class="ListBlock MediaList">
		<ul>
			<li class="ListItem Swipeout">
				<div class="ItemLink ItemCon InkRipple SwipeoutCon">
					<div class="ItemMedia"><img src="images/02.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">不要阻止我</div>
							<div class="ItemAfter">$22</div>
						</div>
						<div class="ItemSubtitle">女王</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</div>
				<div class="SwipeoutActionsLeft">
					<span class="SwipeoutItem BGreen DemoReply">回复</span>
					<span class="SwipeoutItem BBlue DemoForwarding">转发</span>
				</div>
				<div class="SwipeoutActionsRight">
					<span class="SwipeoutItem DemoActions">更多</span>
					<span class="SwipeoutItem BOrange DemoMark">标记</span>
					<span data-confirm="你确定要删除吗?" class="SwipeoutItem SwipeoutDelete">删除</span>
				</div>
			</li>
			<li class="ListItem Swipeout">
				<div class="ItemLink ItemCon InkRipple SwipeoutCon">
					<div class="ItemMedia"><img src="images/02.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">不要阻止我</div>
							<div class="ItemAfter">$22</div>
						</div>
						<div class="ItemSubtitle">女王</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</div>
				<div class="SwipeoutActionsLeft">
					<span class="SwipeoutItem BGreen DemoReply">回复</span>
					<span class="SwipeoutItem BBlue DemoForwarding">转发</span>
				</div>
				<div class="SwipeoutActionsRight">
					<span class="SwipeoutItem DemoActions">更多</span>
					<span class="SwipeoutItem BOrange DemoMark">标记</span>
					<span data-confirm="你确定要删除吗?" class="SwipeoutItem SwipeoutDelete">删除</span>
				</div>
			</li>
			<li class="ListItem Swipeout">
				<div class="ItemLink ItemCon InkRipple SwipeoutCon">
					<div class="ItemMedia"><img src="images/02.jpg" width="80"></div>
					<div class="ItemInner">
						<div class="ItemTitleRow">
							<div class="ItemTitle">不要阻止我</div>
							<div class="ItemAfter">$22</div>
						</div>
						<div class="ItemSubtitle">女王</div>
						<div class="ItemText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.</div>
					</div>
				</div>
				<div class="SwipeoutActionsLeft">
					<span class="SwipeoutItem BGreen DemoReply">回复</span>
					<span class="SwipeoutItem BBlue DemoForwarding">转发</span>
				</div>
				<div class="SwipeoutActionsRight">
					<span class="SwipeoutItem DemoActions">更多</span>
					<span class="SwipeoutItem BOrange DemoMark">标记</span>
					<span data-confirm="你确定要删除吗?" class="SwipeoutItem SwipeoutDelete">删除</span>
				</div>
			</li>
		</ul>
	</div>

</div>




















